<template>
  <div class="health-knowledge">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="category-card">
          <template #header>
            <div class="card-header">
              <span>分类</span>
            </div>
          </template>
          <el-menu
            :default-active="activeCategory"
            class="category-menu"
            @select="handleCategorySelect"
          >
            <el-menu-item index="all">全部</el-menu-item>
            <el-menu-item
              v-for="category in categories"
              :key="category"
              :index="category"
            >
              {{ category }}
            </el-menu-item>
          </el-menu>
        </el-card>
      </el-col>

      <el-col :span="18">
        <el-row :gutter="20">
          <el-col :span="12" v-for="article in filteredArticles" :key="article.id">
            <el-card class="article-card">
              <template #header>
                <div class="article-header">
                  <h3>{{ article.title }}</h3>
                  <span class="category-tag">{{ article.category }}</span>
                </div>
              </template>
              <div class="article-content">
                <p>{{ article.content }}</p>
              </div>
              <div class="article-footer">
                <span class="create-time">{{ article.createTime }}</span>
                <el-button type="text" @click="readMore(article)">阅读更多</el-button>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <el-dialog v-model="articleDialogVisible" :title="currentArticle.title" width="800px">
      <div class="article-detail">
        <div class="article-meta">
          <span class="category">{{ currentArticle.category }}</span>
          <span class="time">{{ currentArticle.createTime }}</span>
        </div>
        <div class="article-content">
          {{ currentArticle.content }}
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'HealthKnowledge',
  data() {
    return {
      articles: [],
      activeCategory: 'all',
      articleDialogVisible: false,
      currentArticle: {}
    }
  },
  computed: {
    categories() {
      return [...new Set(this.articles.map(a => a.category))]
    },
    filteredArticles() {
      if (this.activeCategory === 'all') {
        return this.articles
      }
      return this.articles.filter(article => article.category === this.activeCategory)
    }
  },
  methods: {
    async fetchArticles() {
      try {
        const response = await axios.get('http://localhost:3000/healthArticles')
        this.articles = response.data
      } catch (error) {
        this.$message.error('获取文章列表失败')
      }
    },
    handleCategorySelect(category) {
      this.activeCategory = category
    },
    readMore(article) {
      this.currentArticle = article
      this.articleDialogVisible = true
    }
  },
  mounted() {
    this.fetchArticles()
  }
}
</script>

<style scoped>
.health-knowledge {
  padding: 20px;
}

.category-card {
  margin-bottom: 20px;
}

.category-menu {
  border-right: none;
}

.article-card {
  margin-bottom: 20px;
}

.article-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.article-header h3 {
  margin: 0;
}

.category-tag {
  background-color: #ecf5ff;
  color: #409eff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.article-content {
  color: #666;
  margin: 10px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.article-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.create-time {
  color: #999;
  font-size: 12px;
}

.article-detail {
  padding: 20px;
}

.article-meta {
  margin-bottom: 20px;
  color: #999;
}

.article-meta .category {
  margin-right: 20px;
}
</style> 